// 签约联系人
import React ,{useState,useEffect}from 'react'
import  '../../assets/css/Linkman.css'
import {Button,Input,Table,Select,message} from 'antd'
import { getUser,postAll } from '../../api/linkman'
import {CheckOutlined  ,UpOutlined,DownOutlined,CloseOutlined } from '@ant-design/icons'

export default function Linkman() {
  useEffect(()=>{
    getUser().then(res=>{
      setData(res.data.data)
    })
  } ,[])
  const [box,setBox]=useState(false)
  const [Mod,setMod]=useState(false)
  const [value,setvaluealue]=useState('')
  const [value1,setvaluealue1]=useState('')
  const [value2,setvaluealue2]=useState('')
  const [value3,setvaluealue3]=useState('')
  const [value4,setvaluealue4]=useState('')
  const [value5,setvaluealue5]=useState('')
  const [check,setCheck]=useState('')
  const [look,setLook]=useState({})
  let [data,setData] = useState([])
  let arr=[
    '有未开始的租期',
    '租期进行中',
    '有已结束的租期'
  ]

  const columns = [
    {
      title: '客户',
      dataIndex: 'clientName',
      key: 'clientName',
      align:'center',
    },
    {
      title: '有未开始的租期',
      align:'center',
      dataIndex: 'noStart',
      key: 'noStart',
    },
    {
      title: '租期进行中',
      align:'center',
      dataIndex: 'starting',
      key: 'starting',
    },
    {
      title: '有已结束的租期',
      align:'center',
      dataIndex: 'finished',
      key: 'finished',
    },
    {
      title: '联系人',
      align:'center',
      dataIndex: 'adminname',
      key: 'adminname',
    },
    {
      title: '联系人手机号',
      align:'center',
      dataIndex: 'adminphone',
      key: 'adminphone',
    },
    {
      title: '联系人邮箱',
      align:'center',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '联系人职务',
      align:'center',
      dataIndex: 'post',
      key: 'post',
    },

   {
    title: '操作',
    align:'center',
    height:60,
    key:'id',
    render:(text)=>{
      return(
        <div className='w-lik-col' onClick={()=>{
          setLook(text)
          setMod(true)
        }}>设置联系人</div>
      )
  }
   }
  ];
  return (
    <div className='w-lik-top'>
      <div style={{
        marginBottom:20
      }}>签约联系人</div>
      <div className="w-lik-selector-box">
          <Input className='w-lik-phone-name' value={value} onChange={(e)=>{
            setvaluealue(e.target.value)
          }} placeholder='请输入客户名称'/>
          <div className={box?"w-lik-dis-no":""}>
             <div className='w-check-box'>
                <p>租期状态</p>
                 <div className='w-one-check-box w-dis-jas'>
                  {arr.map(item=>(
                    <div className='w-one-check-box' key={item}>
                      <div onClick={()=>{
                        setCheck(item)
                      }} className={check==item?'w-col-box w-col-box-bor':'w-col-box-bor'}><CheckOutlined className={check==item?"w-lik-icon":"w-lik-dis-no"}/></div>
                      <p>{item}</p>
                    </div>
                  ))}
                 </div>
              </div>  
              
          <div className='w-lik-phone'>
            <p>联系人姓名或手机号</p>
            <Input value={value1} onChange={(e)=>{
            setvaluealue1(e.target.value)
          }} />
          </div>
          </div>
            <div className='w-lik-pad-box'>
                <div className='w-mock-bor'></div>
                <div className='w-mock-pos' onClick={()=>{
                  setBox(!box)
                }}>
                  <UpOutlined className={box?"w-lik-dis-no":"w-lik-ma-lef"}/>
                  <DownOutlined className={!box?"w-lik-dis-no":"w-lik-ma-lef"}/>
                  {!box?"收起筛选":"展开筛选"}
                </div>
              
            </div>
            <div className={box?"w-lik-dis-no":""}>
            <div className='w-but-bom-box'>
                  <Button className='w-look-but'>查询</Button>
                  <Button className='w-nolook-but'>重置</Button>
                </div>
                </div>
      </div>
      <div className='w-lik-tab-box'>
        
      <Table  align='center'  dataSource={data} columns={columns} scroll={{
        scrollToFirstRowOnChange:true,
        y:450,
        x:1185
      }}/> 
      </div>
      <div className={Mod?'w-pos-mod':'w-lik-dis-no'}>
            <div className='w-mod'></div>
            <div className='w-center-box'>
                <div className='w-icon-box-user'><p>设置签约联系人</p><CloseOutlined onClick={()=>{
                  setMod(false)
                }}/></div>
                <div className=' w-lik-Input-box w-lik-Input-box-jas-but'>
                <div className=' w-lik-Input-box w-wrap'>
                  *<p>联系人姓名</p>
                  <Input value={value2} placeholder='请输入联系人姓名' className='w-lik-Inp' onChange={(e)=>{
                    setvaluealue2(e.target.value)
                  }}></Input>
                </div>
                <div className=' w-lik-Input-box w-wrap'>
                  *<p>联系人手机号</p>
              
                  <div style={{
                    display:'flex',
                    width:206,
                    justifyContent:"space-between"
                  }}>
           
                <Select
                defaultValue="86"
                  style={{
                    width: 73,
                    height: 36,
                  }}
                 
                >
                  <Select.Option value="86">中国+86</Select.Option>
                  <Select.Option value="87">+87</Select.Option>
                </Select>
                <Input placeholder='请输入联系人手机号' value={value3} style={{
                  width:127,
                  height:36
                }} onChange={(e)=>{
                  setvaluealue3(e.target.value)
                }}></Input>
                </div>
                </div>
                
                </div>
                <div className=' w-lik-Input-box w-lik-Input-box-jas-but w-map-10'>
                <div className=' w-lik-Input-box w-wrap'>
                  <p>联系人邮箱</p>
                  <Input placeholder='请输入联系人邮箱' className='w-lik-Inp' value={value4} onChange={(e)=>{
                  setvaluealue4(e.target.value)
                }}></Input>
                </div>
                <div className=' w-lik-Input-box w-wrap'>
                  <p>联系人职务</p>
              
             <Input className='w-lik-Inp'  value={value5} onChange={(e)=>{
                  setvaluealue5(e.target.value)
                }} placeholder='请输入联系人职务' ></Input>
                </div>
                
                </div>
                <div className='w-bot-but-two'>
        <Button className='w-look-but' onClick={()=>{
          console.log(look);
          postAll(look.id,value2,value3,value4,value5).then(res=>{
            getUser().then(res=>{
              setData(res.data.data)
              message.open({
                type: 'success',
                content: '修改成功',
              });
              setMod(false)
              setvaluealue2('')
              setvaluealue3('')
              setvaluealue4('')
              setvaluealue5('')
            })
          })
        }}>确认</Button>
      <Button className='w-nolook-but' onClick={()=>{
        setMod(false)
        message.open({
          type: 'success',
          content: '取消成功',
        });
      }}>取消</Button></div>
            </div>
      </div>
      
    </div>
  )
}
